<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跨域登入cookie传递实现</title>
</head>
<body>

	<!-- withCredentials属性：
		1、在使用ajax发送跨域请求时，默认情况下不会再请求中携带cookie信息
		2、withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值是false
		3、Access-Control——Allow-Credentials；true 允许客户端发送请求携带cookie -->



	<!-- 布局 -->
	<form id="loginForm">
		<div class="form-group">
			<label >用户名</label>
			<input type="text" name="username" placeholder="请输入用户名">
		</div>

		<div class="form-group">
			<label >密码</label>
			<input type="password" name="password" placeholder="请输入用密码">
		</div>

		<input type="button" value="登入" id="loginBtn">
		<input type="button" value="检测用户登入状态" id="checkLogin">
		
	</form>

	<script type="text/javascript">
		// 获取登入按钮
		var loginBtn = document.getElementById('loginBtn');
		// 获取检测登入按钮
		var checkLogin = document.getElementById('checkLogin');
		// 获取登入表单
		var loginForm = document.getElementById('loginForm');
		// 为登入按钮添加单击事件
		loginBtn.onclick = function (){
			// 将html表单转换为formData对象
			 var formData = new FormData(loginForm);	
			 // 创建ajax对象
			 var xhr = new XMLHttpRequest();
			 // 配置ajax对象
			 xhr.open("post",'http://localhost:3001/login');

			 // 当发送跨域请求时，携带cookie信息
			 xhr.withCredentials=true;

			 // 发送请求同时携带参数
			 xhr.send(formData);
			 // 监听服务器给予的响应的内容
			 xhr.onload=function (){
			 	console.log(xhr.responseText);
			 }
		}







	</script>


	






</body>
</html>